var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var AttrContent = require('../widget/AttrContent');
var IncreaseId = require('../../web/tools/IncreaseId');
var ajax = require('../tools/ajax');
var Icon = require('../components/Icon');
var MsgBox = require('../components/MsgBox');
var ShopPro = require('../components/ShopPro');

module.exports = React.createClass({
    getInitialState: function () {
        this.pullDownTips = {
            // 下拉状态
            0: '下拉发起刷新',
            1: '继续下拉刷新',
            2: '松手即可刷新',
            3: '正在刷新',
            4: '刷新成功'
        };
        this.pullUpTips = {
            // 上拉状态
            0: '上拉发起加载',
            1: '松手即可加载',
            2: '正在加载',
            3: '加载成功'
        };
        this.itemsChanged = false;
        return {
            theme:"Default", //Default/Blue
            limit:0,
            items:[],
            oldItems:[],
            pullUpStatus:0,
            pullDownStatus: 3,
            isTouching:false,
            flag:true,
            goods_id:"",
            hact:"#",//地址
            pullUpFlag:false
        }
    },
    myScroll:"",
    componentDidMount: function () {
        this.getGoodsInfoByCateid(0);
        setTimeout(this.iScroll,500);
    },
    componentDidUpdate() {
        var p=this;
        // 仅当列表发生了变更，才调用iscroll的refresh重新计算滚动条信息
        if (this.itemsChanged) {
            setTimeout(function(){
                p.myScroll.refresh();
            },500);
        }
    },
    iScroll(){
        var p =this;
        var options = {
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        };
        p.myScroll = new IScroll("#ScrollContainer",options);
        p.myScroll.on("scrollEnd", p.onScrollEnd);
    },
    onScrollEnd() {
        var p=this;
        // 滑动结束后，停在加载区域
        if (this.myScroll.y <= this.myScroll.maxScrollY) {
            var limit = this.state.limit;
            limit = limit+6;
            this.setState({limit:limit,pullUpFlag:true},()=>{
                p.itemsChanged = true;
                setTimeout(function(){
                    p.getGoodsInfoByCateid(limit);
                },1500);
            });
        }
    },
    /**获取二级类目下的商品*/
    getGoodsInfoByCateid(limit){
        var p =this;
        p.setState({pullUpFlag:false});
        var searchPro = localStorage.searchPro;
        if(searchPro!=""){
            ajax("POST","getSearchPro",{searchPro:searchPro,limit:limit},function(dt) {
                if (dt.data.length > 0 && dt.success) {
                    var obj = dt.data;
                    var items = p.state.items;
                    for(var i=0;i<obj.length;i++){
                        items.push(obj[i])
                    }
                    p.setState({items:items});
                }else{
                    p.refs.MsgBox.setState({
                        type: "no",
                        timeout:750,
                        show:true,
                        word:"已经到底了"
                    })
                }
            })
        }else{
            var cate_id = localStorage.getItem("cateId");
            var countryid = localStorage.getItem("countryid");
            ajax("POST","getGoodsInfoByCateid",{cate_id:cate_id,countryid:countryid,limit:limit},function(dt) {
                if (dt.data.length > 0 && dt.success) {
                    var obj = dt.data;
                    console.log(obj[0].barcode);
                    var items = p.state.items;
                    var oldItems = p.state.oldItems;
                    if(oldItems.length>0){
                        if(obj[0].id !== oldItems[0].id){
                            for(var i=0;i<obj.length;i++){
                                items.push(obj[i]);
                            }
                        }
                    }else{
                        items = obj;
                    }
                    p.setState({items:items,oldItems:obj});
                    if(p.myScroll){
                        p.myScroll.refresh();
                    }
                }else{
                    p.refs.MsgBox.setState({
                        type: "no",
                        timeout:750,
                        show:true,
                        word:"已经到底了"
                    })
                }
            })
        }
    },
    /**商品详情*/
    proInfo: function (e){
        var id = e.currentTarget.getAttribute("data-id");
        var price = e.currentTarget.getAttribute("data-price");
        localStorage.setItem("back","#fenleiPro");
        location.href = "#goodDetail/"+id;
    },
    render: function () {
        var p = this;
        var objs = p.state.items;
        var odd = [];
        var even = [];
        for(var i = 0;i <objs.length;i++){
            if(i%2 == 0){
                odd.push(objs[i]);
            }else{
                even.push(objs[i]);
            }
        }
        var shoplist_l = odd.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.proInfo} data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });
        var shoplist_r = even.map(function(obj,index){
            if(obj.goods_img) {
                var goods_img = obj.goods_img.split(",")[0];
            }
            return(
                <div key={index} className="box" onClick={p.proInfo}  data-id={obj.id} data-shop-id={obj.shop_id} data-name={obj.goods_name} data-number={obj.goods_number} data-price={obj.ProPrice}>
                    <div className="pic">
                        <img src={goods_img} />
                    </div>
                    <div className="shop_pro">
                        <p className="pname" ref="goodname">{obj.goods_name}</p>
                        <p className="p_des">{obj.goods_desc}</p>
                        <span className="p_des" ref="goodnumber">{obj.goods_number}</span><span className="p_des">件</span>
                    </div>
                    <div className="spro_con">
                        <div className="pro_country">

                        </div>
                        <div className="pro_price">
                            <span ref="goodprice">{obj.ProPrice}</span><span>元</span>
                        </div>
                        <div className="pro_addcart">
                            <Icon icon="#icon-gouwuche-tianjia"></Icon>
                        </div>
                    </div>
                </div>
            )
        });
        return (
            <div className="main"  id="main">
                <Bheader  ref="bheader" theme={p.state.theme} title="类目商品" hact="#fenlei"></Bheader>
                <div id="ScrollContainer">
                    <div className="shopProWrap">
                        <div className="pro">
                            <div className="pro-left">
                                {shoplist_l}
                            </div>
                            <div className="pro-right">
                                {shoplist_r}
                            </div>
                        </div>
                        <div className="pullUp" style={{visibility:p.state.pullUpFlag?"visible":"hidden"}}>
                            <div className="refresh loading"></div>
                        </div>
                    </div>
                </div>
                <MsgBox ref="MsgBox"></MsgBox>
            </div>
        )
    }
});
